*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: #c8cbd2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content{
    width: 427px;
    height: 754px;
    background-color: #e2e6e9;
    border-radius: 80px;
    box-shadow: 0 5px 10px 5px #b7bbbe;
}
.temperature{
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 115px auto 63px auto;
    background-color: #e2e6e9;
    box-shadow: -30px -30px 40px -10px #f8f7fc,10px 10px 33px -5px #b9bdc0;
}
.core{
    width: 159px;
    height: 162px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight: bold;
    color: #fdfbff;
    box-shadow: 0px 15px 12px -2px #8f3616 inset;
    background: radial-gradient(circle at 80px 150px,#dfe135,#db752b,#a03e21)
}
.spot{
    position: absolute;
    bottom: 55px;
    right: 45px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #d1d4db;
    box-shadow: -12px -12px 20px 0px #f2f6f9 inset
}
.screen{
    margin-top: 65px;
    width: 320px;
    height: 136px;
    background-color: #d5d8df;
    margin: 0 auto;
    border-radius: 15px;
    display: flex;
    align-items: center;
    box-shadow: 0px 14px 13px 0px #c8cbd2 inset;
}
.screen .left,.right{
    flex-grow: 1;
    text-align: center;
    line-height: 36px;
}
.screen p{
    letter-spacing: 3px;
    color: #898e91;
}
.screen h2{
   font-weight: normal;
   font-size: 30px;
   color: #272828;
}